<template>
	<SearchTable ref='tableRef' :search='Config.search' :table='Config.table' :control='Config.controls'>
		<template #child='{ row }'>
			<Table :loading='ajax.loading' :config='{...Config.tableChild, data: row?.children ?? []}' />
		</template>
	</SearchTable>
</template>

<script setup>
	/* ---------------------------  Component --------------------------- */
	const SearchTable 	= $.lazy(()=>import('#cpt/temp/SearchTable.vue'))
	const Table 	= $.lazy(()=>import('@antd/table.vue'))
	/* --------------------------- props --------------------------- */
	const { config } = defineProps({
		config : { type:Object, default:{  } },
	})
	
	let tableRef = $ref()
	
	let ajax = $ref({ data:[] })
	
	let Config = {
		search: config.search,
		table: {
			hasChild:1,
			...config?.table,
			onExpand: (expand, row) =>{
				if( expand ){
					const idStr = config?.idStr ?? $config.pullIdName
					
					// const d = tableRef.getData()
					// let index
					// for(let i=0; i<d.length; i++){
					// 	if( d[i][idStr] === row[idStr] ){
					// 		index = i
					// 		break;
					// 	}
					// }
					if( !$fn.hasArray( row.children )){
						$http.pull(ajax, config?.tableChild?.childApi, { param: { [idStr]: row[idStr]  }}).then(data=>row.children = data)
					}
					// row.children = [
					// 	{ name:'Java', con:'1', num: 10, mark:'备注', id:2 }
					// ]
					config?.table?.onExpand?.( { expand, row } )
				}
				
			}
		},
		tableChild: {
			height	: 'auto',
			isChild	: 1,
			paging 	: 0,
			...config?.tableChild
		},
		controls: config.controls,
	}
	
	defineExpose({
		getRef: () => tableRef
	})
</script>